<template>
	<view style="background-color: #f4f5f7;">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="clearfix person_info">

				<view class="fl head_img_cont">
					<image :src="userinfo.headpic" mode="" class="head_img"></image>
				</view>
				<view class="fl head_info">
					<view class="head_info_text">
						<text>{{ userinfo.uUser }}</text>

						<text class="head_info_text_tixing" v-if="userinfo.state =='未激活'">未激活，联系报单中心</text>
						<text class="head_info_text_class" v-else>{{ userinfo.state }}</text>
					</view>
					<view class="head_info_detail">{{ userinfo.user_name }}</view>
				</view>
			</view>
			<view class="wallet_info">
				<view class="clearfix wallet_detail">
					<view class="fl wallet_detail_item">
						<view>USDT</view>
						<view class="num">{{ userinfo.uMoney }}</view>
					</view>
					<view class="fl wallet_detail_item">
						<view>DT通证</view>
						<view class="num">{{ userinfo.uBenjin }}</view>
					</view>
					<view class="fl wallet_detail_item">
						<view>储值账户</view>
						<view class="num">{{ userinfo.uLixi }}</view>
					</view>
					
					<view class="fl wallet_detail_item">
						<view>DTSM通证</view>
						<view class="num">{{ userinfo.uLixiSum }}</view>
					</view>
					
				</view>
				<view class="control">
					<view class="row" @click="openRecharge">
						<image src="../../static/icon/icon_deposit_home.png" mode="" class="control_icon" ></image>
						<text class="control_text">充值USDT</text>
					</view>
					
				<view class="row" @click="openWithdrawal">
					<image src="../../static/icon/icon_withdrawal_home.png" mode="" class="control_icon" ></image>
					<text class="control_text" >提取USDT</text>
						</view> 
					
						<view class="row" @click="openTransfer">
					<image src="../../static/icon/icon_transfer_home.png" mode="" class="control_icon" ></image>
					<text class="control_text" >提取DTSM</text>
						</view>
						
						<view class="row"  @click="openChange"> 
						<image src="../../static/icon/been_icon.png" mode="" class="control_icon"></image>
						<text class="control_text" >划转USDT</text>
							</view>
					
				</view>
			</view>


			<view class="ad_pic_cont">

			</view>


			<view class="function_cont">
				<view class="function_title mynotice"><text>交易公告</text></view>
				<view class="function_cont">
					<text class="notice">{{ userinfo.message }}</text>
				</view>
			</view>

			<view class="function_cont">
				<view class="function_title"><text>我的功能</text></view>
				<view class="function_cont">
					<view class="clearfix function_list">
						<view class="fl function_item" @click="openWantInvest">
							<image src="../../static/icon/icon_my_opinion.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">售入DT通证</view>
						</view>

						<view class="fl function_item" @click="openWantinvestlists">
							<image src="../../static/icon/category5.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">售入列表</view>
						</view>

						<view class="fl function_item betting_item" @click="openPayInvestLists">
							
							<image src="../../static/icon/category3.png" mode="" class="function_item_img"></image>
							<text class="betting_num" v-if="userinfo.payInvestCount">{{userinfo.payInvestCount}}</text>
							
							<view class="function_item_text">支付清单</view>
						</view>




						<view class="fl function_item" @click="openWantUnInvest">
							<image src="../../static/icon/icon_my_transaction.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">售出DT通证</view>
						</view>

						<view class="fl function_item" @click="openWantUnInvestLists">
							<image src="../../static/icon/icon_withdrawal_home.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">售出列表</view>
						</view>

						<view class="fl function_item betting_item"  @click="openUnPayInvestLists">
							<image src="../../static/icon/category1.png" mode="" class="function_item_img"></image>
								<text class="betting_num" v-if="userinfo.unPayInvestCount">{{userinfo.unPayInvestCount}}</text>
							<view class="function_item_text">收款详细</view>
						</view>

						<view class="fl function_item" @click="openMoneylist">
							<image src="../../static/icon/icon_deposit_home.png" mode="" class="function_item_img"></image>
							<view class="function_item_text">财务明细</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>

	import {
		CUser
	} from '@/common/cache/user.js';
	var cache_user = new CUser();

	export default {
		data() {
			return {
				tabList: [],
				old: {
					scrollTop: 0
				},
				scrollTop: 0,

				userinfo: {}
			};
		},
		components: {
		
		},

		onLoad() {},
		onShow() {
			cache_user.tradinginfo().then(res => {
				this.userinfo = res;
			});
		},

		mounted() {
			//this.tabList = mine.tabList;
		},
		methods: {
			upper: function(e) {
				//console.log(e);
			},
			lower: function(e) {
				//console.log(e);
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},

			openPayInvestLists(e) {
				uni.navigateTo({
					url: 'bussiness'
				});
			},

			openUnPayInvestLists(e) {
				uni.navigateTo({
					url: 'receivables'
				});
			},

			open() {
				this.$refs.popup.open();
			},
			openSpread(e) {
				uni.navigateTo({
					url: 'news',
					success: res => {}
				});
			},

			openWantInvest(e) {
				uni.navigateTo({
					url: 'wantinvest',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			openWantinvestlists(e) {
				uni.navigateTo({
					url: 'wantinvestlists',
					success: res => {}
				});
			},
			openWantUnInvest(e) {
				uni.navigateTo({
					url: 'wantuninvest',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			openWantUnInvestLists(e) {
				uni.navigateTo({
					url: 'wantuninvestlists',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			openWithdrawal() {
				uni.navigateTo({
					url: 'withdrawal',
					success: res => {},
				})
			},

			openTransfer() {
				uni.navigateTo({
					url: 'transferaccounts',
					success: res => {},
				})
			},
			openChange() {
				uni.navigateTo({
					url: 'changeaccounts',
					success: res => {},
				})
			},

			openRecharge() {
				uni.navigateTo({
					url: 'recharge',
					success: res => {},
				})
			},

			openMoneylist(e) {
				uni.navigateTo({
					url: 'moneylist',
					success: res => {}
				})
			},

		


		}
	};
</script>

<style lang="scss">
	.clearfix {
		zoom: 1;
		display: block;
	}

	.clearfix:after {
		content: '.';
		visibility: hidden;
		display: block;
		height: 0;
		clear: both;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.active {
		display: inline !important;
	}

	.colorWhite {
		color: #ffffff;
	}

	scroll-view {
		height: 100vh;
	}

	.person_info {
		background-color: #6399e3;
		padding: 164upx 20upx 110upx;
		position: relative;

		.message_cont {
			position: absolute;
			top: 94upx;
			right: 30upx;

			.message_img {
				width: 50upx;
				height: 50upx;
			}

			.scan_img {
				width: 50upx;
				height: 50upx;
				margin-right: 10upx;
			}

			.badge {
				border-radius: 50%;
				height: 18upx;
				width: 18upx;
				background: #ff0000;
				position: absolute;
				top: -6px;
				right: -6px;
				z-index: 99;
			}
		}

		.head_img_cont {
			.head_img {
				border: 6upx solid #ffffff;
				border-radius: 50%;
				width: 100upx;
				height: 100upx;
			}
		}

		.head_info {
			margin: 10upx 0 0 18upx;

			.head_info_text {
				color: #ffffff;
				font-size: 30upx;

				.head_info_text_class {
					background-color: #ffd83b;
					font-size: 22upx;
					padding: 4upx 14upx 4upx 4upx;
					font-style: italic;
					margin-left: 10upx;
				}


				.head_info_text_tixing {
					background-color: #f40000;
					font-size: 22upx;
					padding: 4upx 14upx 4upx 4upx;
					font-style: italic;
					margin-left: 10upx;
				}
			}

			.head_info_detail {
				color: #9ecaff;
				font-size: 26upx;
				margin-top: 10upx;
			}
		}
	}

	.wallet_info {
		margin: -64upx 20upx 0;
		padding: 16upx 36upx;
		background-color: #ffffff;
		border-radius: 20upx;
		position: relative;

		.wallet_detail {
			font-size: 28upx;
			line-height: 50upx;
			border-bottom: 2upx dashed #e8e8e8;
			padding-bottom: 30upx;
			color: rgb(51, 51, 51);

			.wallet_detail_item {
				width: 33%;
				line-height: 60upx;

				.num {
					font-size: 40upx;
				}
			}
		}

		.control {
			margin-top: 36upx;
			padding-bottom: 26upx;
			display: flex;
			align-items: center; //子元素垂直居中


			.row {
				width: 25%;
				float: left;
			}

			.control_icon {
				width: 48upx;
				height: 48upx;
				float: left;
			}

			.control_text {
				font-size: 26upx;
				line-height: 40upx;
				height: 40upx;
				width: 90upx;
				margin-left: 10upx;
				color: rgb(51, 51, 51);
				float: left;
			}
		}
	}

	.ad_pic_cont {
		padding: 20upx 40upx 10upx;

		.ad_pic {
			width: 49%;
			height: 100upx;
			border-radius: 10upx;
		}

		.ad_pic:first-child {
			width: 49%;
			padding-right: 2%;
		}

		.message {
			border: #0081ff;
		}
	}

	.function_cont {
		background-color: #ffffff;
		margin: 0 20upx 20upx;
		border-radius: 10upx;
		padding: 20upx 0;

		.function_title {
			font-size: 28upx;
			padding: 0 0 0upx 20upx;
			border-left: 10upx solid #1191f6;
			color: rgb(51, 51, 51);
		}

		.mynotice {
			border-left: 10upx solid #ff0000;
		}

		.notice {
			font-size: 28upx;
			line-height: 56upx;
			letter-spacing: 1px;
		}

		.function_cont {
			margin-top: 18upx;
			border-top: 2upx solid #e8e8e8;

			.function_list {
				margin-top: 40upx;

				.function_item {
					width: 33%;
					font-size: 22upx;
					text-align: center;
					line-height: 42upx;
					padding: 10upx;
					color: rgb(51, 51, 51);

					.function_item_img {
						width: 50upx;
						height: 50upx;
					}
					
					
				}

				.betting_item {
					position: relative;

					.betting_num {
						top: 0upx;
						right: 35%;
						background: #e70000;
						border-radius: 50%;
						height: 28upx;
						width: 28upx;
						line-height: 28upx;
						color: #fff;
						position: absolute;
					}
				}
			}

			.function_list:first-child {
				margin-top: 20upx;
			}
		}
	}

	.btn_cont {
		margin: 20upx;

		.exit_btn {
			text-align: center;
			font-size: 28upx;
			background-color: #ffffff;
			color: rgb(51, 51, 51);
		}
	}

	.popup_cont {
		background-color: #ffffff;
		border-radius: 10upx;
		width: 520upx;
		height: 300upx;

		.popup_cont_list {
			padding: 20upx;

			.head_img_item_cont {
				position: relative;
				margin-left: 46upx;

				.head_img_item {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					border: 2upx solid #cecece;
				}

				.active_head_img {
					position: absolute;
					top: 76upx;
					left: 26upx;
					width: 46upx;
					height: 46upx;
					display: none;
				}
			}
		}
	}
	
	
	

</style>
